import React, { Component } from 'react'
import bg from './img/bg.jpg'
import './css/style.css';
import Sex from "./sex";
import CheckBox from "./checkbox";
import Select from "./select";
import File from "./File";
import { apiReg } from "../../api";

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: null,
      password: null,
      sex: '',
      work: '',
      sexs: ["男", "女"],
      values: [],
      fruits: ["打篮球", "打游戏", "踢足球"],
      filename:'',
      data: [
        { value: "学生", text: "学生" },
        { value: "教师", text: "教师" },
        { value: "医生", text: "医生" }
      ]
    };
  }
  sumibt = (e) => {
    e.preventDefault();
    console.log(this.state)
    this.setState(() => ({
      username: this.refs.username.value,
      password: this.refs.pwd.value
    }), () => {
      let { username, password, sex, work, values,filename } = this.state
      if (username && password) {
        apiReg({ username, password, sex, work, values,filename }).then((res) => {
          res.data.code ? alert(res.data.msg) : alert(res.data.msg)
        }).catch(error => console.log(error))
      } else {
        this.refs.username.focus();
      }
    })
  }
  showSex = (sex, checked) => {
    if (checked) {
      this.setState({ sex });
    }
  }
  showSelect = (value) => {
    this.setState({
      work: value
    })
  }
  showFile = (filename) =>{
    this.setState({
      filename
    })
  }
  render() {
    return (
      <div>
        <div>
          <img src={bg} alt="" className="bg"></img>
          <div className="htmleaf-container">
            <div className="wrapper">
              <div className="container">
                <h1>用户注册</h1>
                <form className="form" onSubmit={this.sumibt}>
                  <input ref="username" type="text" id="username" placeholder="用户名" autoComplete="off" />
                  <input ref="pwd" type="password" id="pw" placeholder="密码" />
                  <Sex showSex={this.showSex} fruit={this.state.sex} fruits={this.state.sexs} />
                  <CheckBox values={this.state.values} fruits={this.state.fruits} />
                  <Select data={this.state.data} showSelect={this.showSelect} />
                  <File showFile={this.showFile} />
                  <button type="sumbit" id="login-button">注册</button>
                </form>
              </div>
              <ul className="bg-bubbles">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
          </div>
        </div>
      </div>

    )
  }
}

// import React from 'react';
// import { Form, Label, TextBox, NumberBox, CheckBox, LinkButton } from 'rc-easyui';

// class Login extends React.Component {
//   constructor() {
//     super();
//     this.state = {
//       user: {
//         name: null,
//         age: 10,
//         email: null,
//         accept: false
//       },
//       rules: {
//         name: ['required', 'exists'],
//         age: 'age[20]',
//         email: "email"
//       },
//       errors: {}
//     }
//   }
//   getCustomRules() {
//     return {
//       exists: {
//         validator: (value) => {
//           return new Promise((resolve) => {
//             setTimeout(() => {
//               const b = ['name1', 'name2'].indexOf(value) > -1;
//               resolve(b)
//             }, 200)
//           })
//         },
//         message: 'The user does not exist.'
//       },
//       age: {
//         validator(value, param) {
//           return value > parseInt(param[0], 10);
//         },
//         message: 'The age must be greater than {0}'
//       }
//     }
//   }
//   getError(name) {
//     const { errors } = this.state;
//     return errors[name] && errors[name].length
//       ? errors[name][0]
//       : null;
//   }
//   hasError(name) {
//     return this.getError(name) != null;
//   }
//   handleChange(name, value) {
//     let user = Object.assign({}, this.state.user);
//     user[name] = value;
//     this.setState({ user: user })
//   }
//   handleSubmit() {
//     this.form.validate(errors => {
//       console.log(errors)
//     })
//   }
//   render() {
//     const { user, rules } = this.state;
//     return (
//       <div>
//         <h2>Custom Rules</h2>
//         <Form ref={ref => this.form = ref}
//           model={user}
//           rules={rules}
//           validateRules={this.getCustomRules()}
//           onChange={this.handleChange.bind(this)}
//           onValidate={(errors) => this.setState({ errors: errors })}
//         >
//           <div style={{ marginBottom: '20px' }}>
//             <Label htmlFor="name" align="top">Name(name1,name2):</Label>
//             <TextBox inputId="name" name="name" value={user.name}></TextBox>
//             <div className="error">{this.getError('name')}</div>
//           </div>
//           <div style={{ marginBottom: '20px' }}>
//             <Label htmlFor="age" align="top">Age:</Label>
//             <NumberBox inputId="age" name="age" value={user.age}></NumberBox>
//             <div className="error">{this.getError('age')}</div>
//           </div>
//           <div style={{ marginBottom: '20px' }}>
//             <Label htmlFor="email" align="top">Email:</Label>
//             <TextBox inputId="email" name="email" value={user.email}></TextBox>
//             <div className="error">{this.getError('email')}</div>
//           </div>
//           <div style={{ marginBottom: '20px' }}>
//             <CheckBox inputId="accept" name="accept" checked={user.accept}></CheckBox>
//             <Label htmlFor="accept" style={{ width: 100 }}>Accept Me</Label>
//           </div>
//           <div style={{ marginBottom: '20px' }}>
//             <LinkButton onClick={this.handleSubmit.bind(this)}>Submit</LinkButton>
//           </div>
//         </Form>
//         <p>{JSON.stringify(user)}</p>
//       </div>
//     );
//   }
// }

// export default Login;